

Rendering Custom Views

Create the custom view

Follow this tutorial for creating custom views.

Create the View Renderer

You can create a view renderer by subclassing the class AbstractViewRenderer or any of its child classes.

In this example, we will create a renderer for the PrependedTextView that we've created in this tutorial.

import org.w3c.dom.HTMLElement
import kotlin.browser.document
import view.core.renderers.viewRenderers.display.TextViewRenderer

// primary constructor to be used when re-rendering the view
open class PrependedTextViewRenderer(
        view: PrependedTextView,
        element: HTMLElement,
        reRendering: Boolean = true
): TextViewRenderer(view, element, reRendering) {

    // secondary constructor to be used when rendering the view for the first time
    constructor(view: PrependedTextView): this(view, document.createElement("p") as HTMLElement, false)

    override fun buildElement() {
        super.buildElement()
        element.innerText = (view as PrependedTextView).prependedText + view.text
    }
}

Register the renderer in the DI container

Create DI bindings for the new renderer and add them to the core library's bindings.

Note that this should be done before the library is first used.

import org.kodein.di.Kodein
import org.kodein.di.erased.bind
import org.kodein.di.erased.factory
import org.w3c.dom.HTMLElement
import view.core.renderers.ViewRenderer
import view.core.views.View
import view.di.KodeinContainer


// declare the bindings
val bindings = Kodein {
    bind<ViewRenderer<*>>("PrependedTextView") with factory { v: View ->
        PrependedTextViewRenderer(v as PrependedTextView) 
    }
    bind<ViewRenderer<*>>("PrependedTextView") with factory { v: View, e: HTMLElement ->
        PrependedTextViewRenderer(v as PrependedTextView, e) 
    }
}

// add the bindings to the core library's DI bindings
KodeinContainer.addConfig(bindings)